<template>
  <div>
    <button type="button" class="btn btn-success my-2" @click="openModal('add')"><i class="fas fa-plus"></i>新增</button>
    {{ formValue.profile.gender }}
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">用户名</th>
          <th scope="col">角色</th>
          <th scope="col">性别</th>
          <th scope="col">头像</th>
          <th scope="col">地址</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <th scope="row">1</th>
          <td>{{ item.username }}</td>
          <td>{{ item.roles.map((o) => o.name).join(",") }}</td>
          <td>{{ item.profile && item.profile.gender }}</td>
          <td>{{ item.profile && item.profile.photo }}</td>
          <td>{{ item.profile && item.profile.address }}</td>
          <td>
            <button type="button" class="btn btn-secondary px-4" @click="openModal('edit', item)">
              <i class="fas fa-edit me-2"></i>编辑
            </button>
            <button type="button" class="btn btn-danger px-4 ms-3" @click="openModal('delete', item)">
              <i class="fas fa-user-times me-2"></i>删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>
    <!-- EDIT Modal -->
    <div
      ref="editRef"
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">{{ msg }}</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >用户名</label
                >
                <input
                  v-model="formValue.username"
                  type="email"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                />
                <!-- <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> -->
              </div>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >密码</label
                >
                <input
                  v-model="formValue.password"
                  type="email"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                />
                <!-- <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> -->
              </div>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >角色</label
                >
                <div>
                  <div class="form-check form-check-inline">
                    <input
                      v-model="formValue.roles"
                      class="form-check-input"
                      type="checkbox"
                      :value="1"
                      id="flexCheckDefault"
                    />
                    <label class="form-check-label" for="flexCheckDefault">
                      管理员
                    </label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input
                      v-model="formValue.roles"
                      class="form-check-input"
                      type="checkbox"
                      :value="2"
                      id="flexCheckChecked"
                    />
                    <label class="form-check-label" for="flexCheckChecked">
                      普通用户
                    </label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input
                      v-model="formValue.roles"
                      class="form-check-input"
                      type="checkbox"
                      :value="3"
                      id="flexCheckChecked"
                    />
                    <label class="form-check-label" for="flexCheckChecked">
                      测试用户
                    </label>
                  </div>
                </div>
              </div>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >性别</label
                >
                <div>
                  <div class="form-check form-check-inline">
                    <input v-model="formValue.profile.gender" :value="1" class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                    <label class="form-check-label" for="flexRadioDefault1">
                      男性
                    </label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input v-model="formValue.profile.gender" :value="2" class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                    <label class="form-check-label" for="flexRadioDefault2">
                      女性
                    </label>
                  </div>
                </div>
              </div>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >用户头像</label
                >
                <input
                  v-model="formValue.profile.photo"
                  type="email"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                />
                <!-- <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> -->
              </div>
              <div class="mb-3">
                <label for="exampleFormControlTextarea1" class="form-label">地址</label>
                <textarea v-model="formValue.profile.address" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              关闭
            </button>
            <button type="button" class="btn btn-primary" @click="editSubmit">确定</button>
          </div>
        </div>
      </div>
    </div>

    <!--DELETE Modal -->
    <div
      ref="deleteRef"
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">删除</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">确定删除该用户吗？</div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              关闭
            </button>
            <button type="button" class="btn btn-primary" @click="deleteSubmit">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import axios from "../../utils/axios";
import * as bootstrap from "bootstrap";
onMounted(() => {
  getUsers();
  initRef();
});

let localType = ''

const list = ref([]);

const itemTmp = ref()

const formValue = reactive({
  username: '',
  password: '',
  profile: {
    gender: 0,
    address: '',
    photo: ''
  },
  roles: []
})

const deleteRef = ref()
const editRef = ref();

const deleteModal = ref()
const editAndModal =  ref()
const msg = ref('新增')


function initRef() {
  deleteModal.value = new bootstrap.Modal(deleteRef.value, { backdrop: true })
  editAndModal.value = new bootstrap.Modal(editRef.value, { backdrop: true })
}

function openModal(type, item) {
  localType = type
  itemTmp.value = item
  if (type === "delete") {
    deleteModal.value.show()
  } else if (type === "edit") {
    msg.value = '编辑'
    editAndModal.value.show()
  } else if (type === "add") {
    msg.value = '新增'
    editAndModal.value.show()
  }
}

async function editSubmit() {
  console.log({ formValue })
  if (localType === 'add') {
    const res = await axios.post('/user', formValue)
    console.log('add user', res)
    Object.assign(formValue, { username: '', password: '', profile: { gender: 0, address: '', photo: '' }, roles: [] })
  }
  editAndModal.value.hide()
}

async function deleteSubmit() {
  console.log('delete', itemTmp.value.id)
  const res = await axios.delete(`/user/${itemTmp.value.id}`)
  deleteModal.value.hide()
  getUsers()
}

async function getUsers() {
  const res = await axios.get("/user");
  console.log({ res });
  if (res && res.length > 0) {
    list.value = res;
  }
}


</script>

<style scoped>
</style>